<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-03 14:41:23
 * @LastEditTime : 2021-03-04 13:48:40
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-design-centerd:\front-end-project\cloud-components\docs\pages\components\cloud-select\example7.vue
-->
<template>
  <CloudSelect
    showSearch
    label-in-value
    v-model="value"
    placeholder="Select users"
    style="width: 100%"
    :filter-option="false"
    :options="options"
    :not-found-content="fetching ? undefined : null"
    v-cloudLoading="this.cloudLoading"
    @search="fetchUser"
    @change="handleChange"
  >
  </CloudSelect>
</template>
<script>
import debounce from 'lodash/debounce';

export default {
  title: '7.远程加载',
  subTitle: '远程加载',
  data() {
    this.lastFetchId = 0;
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      data: [],
      value: [],
      options: [],
      fetching: false
    };
  },
  computed: {
    cloudLoading() {
      return {
        show: this.fetching,
        size: 'small'
      }
    }
  },
  methods: {
    fetchUser(value) {
      console.log('fetching user', value);
      this.lastFetchId += 1;
      const fetchId = this.lastFetchId;
      this.data = [];
      this.fetching = true;
      fetch('https://randomuser.me/api/?results=5')
        .then(response => response.json())
        .then(body => {
          if (fetchId !== this.lastFetchId) {
            // for fetch callback order
            return;
          }
          const data = body.results.map(user => ({
            text: `${user.name.first} ${user.name.last}`,
            value: user.login.username,
          }));
          const arr = [{
            text: '经销商',
            value: 1
          }, {
            text: '测试超超超出超出测试超出超出测试超出超出测试超出超出我是结尾！',
            value: 2
          }, {
            text: '服务商',
            value: 3,
            disabled: true
          }]
          this.options = arr.concat(data);
          this.fetching = false;
        });
    },
    handleChange(value) {
      Object.assign(this, {
        value,
        data: [],
        fetching: false,
      });
    },
  },
};
</script>
<style lang="scss">
</style>